<template>
    <div class="category-management">
        <!-- 页面标题 + 搜索栏 + 新增按钮 -->
        <div class="page-header">
            <h2>分类管理</h2>
            <div class="header-actions">
                <!-- 搜索框 -->
                <t-input
                        v-model="keyword"
                        placeholder="搜索分类名称/类型"
                        class="search-input"
                        @keydown.enter="getCategoryPage"
                >
                    <template #suffix>
                        <t-icon name="search" @click="getCategoryPage" />
                    </template>
                </t-input>
                <!-- 新增按钮 -->
                <t-button @click="handleAdd">
                    <t-icon name="add" /> 新增分类
                </t-button>
            </div>
        </div>

        <!-- 分类列表表格 -->
        <t-table
                :data="categoryList"
                :columns="tableColumns"
                :loading="tableLoading"
                row-key="id"
        >
            <!-- 状态列自定义（启用/禁用标签） -->
            <template #status="{ row }">
                <t-tag :theme="row.status === 1 ? 'success' : 'danger'">
                    {{ row.status === 1 ? '启用' : '禁用' }}
                </t-tag>
            </template>
            <!-- 操作列自定义（编辑/删除按钮） -->
            <template #operations="{ row }">
                <t-button
                        size="small"
                        @click="handleEdit(row)"
                >
                    编辑
                </t-button>
                <t-button
                        size="small"
                        theme="danger"
                        @click="handleDelete(row.id)"
                >
                    删除
                </t-button>
            </template>
        </t-table>

        <!-- 分页控件 -->
        <div class="pagination">
            <t-pagination
                    v-model:current="pageNum"
                    v-model:page-size="pageSize"
                    :total="totalCount"
                    @change="getCategoryPage"
                    show-quick-jumper
                    show-total
            />
        </div>

        <!-- 新增/编辑分类弹窗 -->
        <t-dialog
                :visible="dialogVisible"
                :header="dialogType === 'add' ? '新增分类' : '编辑分类'"
                :width="600"
        >
            <t-form
                    ref="categoryFormRef"
                    :model="formData"
                    :rules="formRules"
                    label-align="right"
                    label-width="120px"
            >
                <!-- 分类类型 -->
                <t-form-item label="分类类型" name="type">
                    <t-input
                            v-model="formData.type"
                            placeholder="请输入分类类型（如：product）"
                    />
                </t-form-item>
                <!-- 分类名称 -->
                <t-form-item label="分类名称" name="name">
                    <t-input
                            v-model="formData.name"
                            placeholder="请输入分类名称"
                    />
                </t-form-item>
                <!-- 唯一标识 -->
                <t-form-item label="唯一标识" name="value">
                    <t-input
                            v-model="formData.value"
                            placeholder="请输入前端组件用的唯一标识"
                    />
                </t-form-item>
                <!-- 父级分类ID -->
                <t-form-item label="父级分类ID" name="parentId">
                    <t-input
                            v-model="formData.parentId"
                            type="number"
                            placeholder="0表示顶级分类"
                    />
                </t-form-item>
                <!-- 排序号 -->
                <t-form-item label="排序号" name="sortOrder">
                    <t-input
                            v-model="formData.sortOrder"
                            type="number"
                            placeholder="数字越大排序越靠前"
                    />
                </t-form-item>
                <!-- 状态 -->
                <t-form-item label="状态" name="status">
                    <t-switch
                            v-model="formData.status"
                            :active-value="1"
                            :inactive-value="0"
                            active-text="启用"
                            inactive-text="禁用"
                    />
                </t-form-item>
            </t-form>

            <!-- 弹窗底部按钮 -->
            <template #footer>
                <t-button @click="dialogVisible = false">取消</t-button>
                <t-button @click="submitForm">确认提交</t-button>
            </template>
        </t-dialog>

        <!-- 删除确认弹窗 -->
        <t-dialog
                :visible="deleteDialogVisible"
                header="删除确认"
                :width="400"
                theme="danger"
        >
            <p>确定要删除该分类吗？删除后不可恢复！</p>
            <template #footer>
                <t-button @click="deleteDialogVisible = false">取消</t-button>
                <t-button theme="danger" @click="confirmDelete">确认删除</t-button>
            </template>
        </t-dialog>
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
    import categoryApi from '../api/category'

    // 2. 页面状态管理
    // 分页相关
    const pageNum = ref(1); // 当前页
    const pageSize = ref(10); // 每页条数
    const totalCount = ref(0); // 总条数
    const categoryList = ref([]); // 分类列表数据
    const tableLoading = ref(false); // 表格加载状态

    // 搜索关键词
    const keyword = ref('');

    // 弹窗相关：修复点1 - 将let改为const（符合Vue3响应式变量声明规范）
    const dialogVisible = ref(false); // 新增/编辑弹窗显示状态
    const dialogType = ref('add'); // 弹窗类型：add=新增，edit=编辑
    const deleteDialogVisible = ref(false); // 删除确认弹窗
    const deleteId = ref(null); // 待删除的分类ID

    // 表单相关
    const categoryFormRef = ref(null); // 表单ref
    const formData = reactive({
        id: null, // 编辑时才有值
        type: '', // 分类类型
        name: '', // 分类名称
        value: '', // 唯一标识
        parentId: 0, // 父级ID（默认顶级）
        sortOrder: 0, // 排序号
        status: 1 // 状态（默认启用）
    });
    // 表单验证规则
    const formRules = reactive({
        type: [{ required: true, message: '请输入分类类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        value: [{ required: true, message: '请输入唯一标识', trigger: 'blur' }],
        parentId: [{ required: true, message: '请输入父级分类ID', trigger: 'blur', type: 'number' }],
        sortOrder: [{ required: true, message: '请输入排序号', trigger: 'blur', type: 'number' }]
    });

    // 3. 表格列配置
    const tableColumns = ref([
        {
            title: '分类类型',
            colKey: 'type',
            width: 120
        },
        {
            title: '分类名称',
            colKey: 'name',
            width: 150
        },
        {
            title: '唯一标识',
            colKey: 'value',
            width: 150
        },
        {
            title: '父级分类',
            colKey: 'parentId',
            width: 120,
            render: (h, { row }) => row.parentId === 0 ? '顶级分类' : row.parentId
        },
        {
            title: '排序号',
            colKey: 'sortOrder',
            width: 100
        },
        {
            title: '状态',
            colKey: 'status', // 自定义插槽
            width: 100
        },
        {
            title: '创建时间',
            colKey: 'createdAt',
            width: 180,
            render: (h, { row }) => row.createdAt ? new Date(row.createdAt).toLocaleString() : '-'
        },
        {
            title: '操作',
            colKey: 'operations', // 自定义插槽
            width: 140,
            fixed: 'right'
        }
    ]);

    // 4. 核心方法
    // 初始化：页面加载时获取第一页数据
    onMounted(() => {
        getCategoryPage();
    });

    // 获取分类分页数据
    const getCategoryPage = async () => {
        try {
            tableLoading.value = true;
            const res = await categoryApi.getPage(keyword.value, pageNum.value, pageSize.value);
            // 假设接口返回格式：{ code:200, data: { records: [], total: 0, current:1, size:10 }, message:"success" }
            if (res.code === 0 && res.data) {
                categoryList.value = res.data.records;
                totalCount.value = res.data.total;
                pageNum.value = res.data.current;
                pageSize.value = res.data.size;
                console.log(categoryList.value)
            } else {
                MessagePlugin.error('获取分类列表失败：' + (res.message || '未知错误'));
            }
        } catch (err) {
            console.error('分类分页查询异常：', err);
            MessagePlugin.error('获取分类列表失败，请重试');
        } finally {
            tableLoading.value = false;
        }
    };

    // 新增分类：打开弹窗并重置表单 - 修复点2：将validate()改为resetValidate()（重置验证状态而非触发验证）
    const handleAdd = () => {
        dialogType.value = 'add';
        dialogVisible.value = true;
        // 重置表单
        formData.id = null;
        formData.type = '';
        formData.name = '';
        formData.value = '';
        formData.parentId = 0;
        formData.sortOrder = 0;
        formData.status = 1;
        // 重置表单验证状态（清除原有错误提示）
        if (categoryFormRef.value) {
            categoryFormRef.value.clearValidate();
        }
    };

    // 编辑分类：打开弹窗并回显数据 - 修复点3：将validate()改为resetValidate()
    const handleEdit = (row) => {
        dialogType.value = 'edit';
        dialogVisible.value = true;
        // 回显数据（深拷贝避免修改原数据）
        formData.id = row.id;
        formData.type = row.type || '';
        formData.name = row.name || '';
        formData.value = row.value || '';
        formData.parentId = row.parentId || 0;
        formData.sortOrder = row.sortOrder || 0;
        formData.status = row.status === 1 ? 1 : 0;
        // 重置表单验证状态
        if (categoryFormRef.value) {
            categoryFormRef.value.clearValidate();
        }
    };

    // 提交表单：新增/编辑分类
    const submitForm = async () => {
        // 1. 表单验证
        const form = categoryFormRef.value;
        if (!form) return;
        const valid = await form.validate();
        if (!valid) return;

        try {
            // 2. 区分新增/编辑调用不同API
            let res;
            if (dialogType.value === 'add') {
                // 新增：不需要传id
                const submitData = { ...formData };
                submitData.status = submitData.status ? 1 : 0;
                delete submitData.id;
                res = await categoryApi.save(submitData);
            } else {
                // 编辑：需要传id
                const submitData = { ...formData };
                submitData.status = submitData.status ? 1 : 0;
                res = await categoryApi.update(submitData);
            }

            // 3. 处理结果
            if (res.code === 0) {
                MessagePlugin.success(dialogType.value === 'add' ? '新增分类成功' : '编辑分类成功');
                dialogVisible.value = false;
                getCategoryPage(); // 重新获取列表
            } else {
                MessagePlugin.error((dialogType.value === 'add' ? '新增' : '编辑') + '分类失败：' + (res.message || '未知错误'));
            }
        } catch (err) {
            console.error(dialogType.value === 'add' ? '新增分类异常：' : '编辑分类异常：', err);
            MessagePlugin.error((dialogType.value === 'add' ? '新增' : '编辑') + '分类失败，请重试');
        }
    };

    // 点击删除：打开确认弹窗
    const handleDelete = (id) => {
        deleteId.value = id;
        deleteDialogVisible.value = true;
    };

    // 确认删除：调用删除API
    const confirmDelete = async () => {
        if (!deleteId.value) return;
        try {
            const res = await categoryApi.delete(deleteId.value);
            if (res.code === 200) {
                MessagePlugin.success('删除分类成功');
                deleteDialogVisible.value = false;
                getCategoryPage(); // 重新获取列表
            } else {
                MessagePlugin.error('删除分类失败：' + (res.message || '未知错误'));
            }
        } catch (err) {
            console.error('删除分类异常：', err);
            MessagePlugin.error('删除分类失败，请重试');
        } finally {
            deleteId.value = null;
        }
    };
</script>

<style scoped>
    .category-management {
        padding: 20px;
        background-color: #fff;
        min-height: calc(100vh - 40px);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .header-actions {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .search-input {
        width: 300px;
    }

    .pagination {
        margin-top: 20px;
        text-align: right;
    }

    /* 适配小屏幕 */
    @media (max-width: 1200px) {
        .search-input {
            width: 200px;
        }
    }

    @media (max-width: 768px) {
        .page-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .header-actions {
            width: 100%;
            justify-content: space-between;
        }

        .search-input {
            width: 100%;
        }
    }
</style>
